<template>
  <view class="allMenu">
<!-- 		<uni-nav-bar fixed="true" left-icon="back" @click-left="back" @click-right="showMenu" right-text="筛选"
		 title="钱包明细"></uni-nav-bar> -->
    
    <view class="poup">
      <uni-popup :show="show" :type="popType" v-on:hidePopup="hidePopup">
        <view class="item" v-for="(item,index) in types" :key='index' @click="changeType(item,index)">
					<view :class='{orange:item.active}'>{{item.text}}</view>
				</view>
      </uni-popup>
    </view>
    <view class="main">
      <!--<view class="dateTitle">{{dateTitle}}</view>-->
      <!--无数据情况-->
      <view class="nodata" v-if="nodata">暂无数据...</view>
			
<!-- 			<view class="uni-list">
				<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
					<view class="uni-list-cell-navigate uni-navigate-right">
						{{item.value}}
					</view>
				</view>
			</view> -->

      <view v-if="list.length>0" class="list">

						<view class="item" :class="{'marginBottom':index===list.length-1}" v-for="(item,index) in list" :key="index">
						 
									<view class="colunm1">
											<view class="date">{{item.date}}</view>
											<view class="time">{{item.time}}</view>
									</view>
							
									<view class="colunm2">
												<view class="row1">
														<view  :class="{income:item.offset>0,expenditure:item.offset<0}">
															<text v-if='item.offset>0' >+</text>
															<text class="money">{{item.offset}}</text>元
														</view>
														<!-- <view class="status" :class="{'red':getRed(item),'gray':getGray(item)}"> -->
														<view class="status">
															{{item.flowStatus.text}}
														</view>
													
												</view>
												
												<view class="description">{{item.detail}}</view>
									</view>
									
						</view>
						<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
						<view class="uni-loadmore loadfinished" v-if="finished">--没有更多数据了--</view>
						
      </view>
			
			
    </view>
  </view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
import uniPopup from '../../../components/uni-popup.vue';
import uniNavBar from '../../../components/uni-nav-bar.vue';
export default {
	name: 'allMenu',
	data() {
		return {
			title: '全部账单',
			loadingText: '',
			content: '暂无数据...',
			loadingClass: 'icon-jiazaizhong',
			popType: 'top',
			types: [
				{
					value: 0,
					text: '全部',
					active: true
				},
				{
					value: 1,
					text: '钱包充值',
					active: false
				},
				{
					value: 2,
					text: '提现',
					active: false
				},
				{
					value: 3,
					text: '项目购买',
					active: false
				},
				{
					value: 4,
					text: '项目收益',
					active: false
				}
			],
			show: false,
			orange: false,
			list: [],
			loading: false,
			finished: false,
			loadMoreText: '加载中...',
			showLoadMore: false,
			nodata: false,
			params: {
				startTime: '',
				endTime: '',
				operateType: '',
				wealthType: 'money',
				start: 0,
				limit: 10,
				token: util.getUserToken()
			}
		};
	},
	components: {
		uniNavBar,
		uniIcon,
		uniPopup
	},
	onNavigationBarButtonTap(e) {
		console.log(e);
		this.show = !this.show;
	},
	onPullDownRefresh() {
		this.params.start = 0;
		this.getList();
		this.finished = false;
	},
	onUnload() {
		this.list = [];
		this.showLoadMore = false;
	},
	onReachBottom() {
		console.log('onReachBottom');
		if (!this.finished) {
			this.showLoadMore = true;
			setTimeout(() => {
				this.params.start += this.params.limit;
				this.getList();
			}, 300);
		}
	},
	methods: {
		//统一的关闭popup方法
		hidePopup: function() {
			this.show = false;
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		showMenu() {
			this.show = true;
		},
		onSelect() {
			this.show = true;
		},
		getStatus(item) {
			if (item.flowStatus) {
				return item.flowStatus.text;
			}
		},
		getRed(item) {
			if (item.flowStatus) {
				return item.flowStatus.text === '已过期';
			}
		},
		getGray(item) {
			if (item.flowStatus) {
				return item.flowStatus.text === '失败';
			}
		},
		formatMoney(money) {
			let num = util.showDecimal(money);
			return Math.abs(num);
		},
		formatDate(timeStamp) {
			// console.log(timeStamp);
			// return util.timestampToFormatString(timeStamp, 'MM/dd');
		},
		formatTime(timeStamp) {
			// return util.timestampToFormatString(timeStamp, 'hh:mm');
		},
		changeType(item, index) {
			for (let i = 0; i < this.types.length; i++) {
				if (i === index) {
					this.types[i].active = true;
				} else {
					this.types[i].active = false;
				}
			}

			switch (index) {
				case 0:
					this.params.operateType = '';
					uni.setNavigationBarTitle({
						title: '全部'
					});
					// this.content = '您还没有抢到红包';
					break;
				case 1:
					// 提现
					this.params.operateType = 'recharge';
					// this.content = '暂无数据...';
					uni.setNavigationBarTitle({
						title: '钱包充值'
					});

					break;
				case 2:
					// 问答红包
					this.params.operateType = 'withdraw';
					uni.setNavigationBarTitle({
						title: '提现'
					});
					break;
				case 3:
					// 到店红包
					this.params.operateType = 'movieBuy';
					// this.content = '您还没有抢到到店红包';
					uni.setNavigationBarTitle({
						title: '项目购买'
					});

					break;
				case 4:
					// 好友红包奖励
					this.params.operateType = 'profit';
					// this.content = '暂无数据...';
					uni.setNavigationBarTitle({
						title: '项目收益'
					});
			}
			this.list = [];
			this.params.start = 0;
			this.getList();
			this.show = false;
		},

		getList() {
			//             uni.showLoading({
			//                 title: '正在加载...'
			//             });
			this.loading = true;

			util.ajax(
				'userWealthFlows',
				this.params,
				data => {
					// uni.hideLoading();
					let json = data.data;
					if (json.status) {
						console.log(json.data);
						if (0 == this.params.start) {
							this.list = [];
						}
						for (let i = 0; i < json.data.length; i++) {
							json.data[i].offset = util.showDecimal(json.data[i].offset);
							json.data[i].date = util.timestampToFormatString(
								json.data[i].createTime,
								'MM/dd'
							);
							json.data[i].time = util.timestampToFormatString(
								json.data[i].createTime,
								'hh:mm'
							);
							this.list.push(json.data[i]);
						}
						uni.stopPullDownRefresh();

						if (this.list.length === 0) {
							this.nodata = true; //无数据
						} else {
							this.nodata = false;
						}
						// 加载状态结束
						this.loading = false;
						if (json.data.length < this.params.limit) {
							this.finished = true;
							this.showLoadMore = false;
						}
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					console.log(data);
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		}
	},
	onLoad() {
		this.getList();
	}
};
</script>

<style lang="less" scoped>
/*通用 */
view {
	font-size: 28upx;
	line-height: 1.8;
}
.uni-navbar-container {
	justify-content: center;
}
.loadfinished {
	padding: 15upx 0;
	color: #cccccc;
	// background: #fafafa;
}
.uni-list:after {
	background-color: none;
}
.allMenu {
	// background: #fff;
	position: relative;
	z-index: 0;
	flex: 1;
	flex-direction: column;
	width: 100%;
	.poup {
		position: relative;
		// border: 1px solid red;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		.uni-popup-top {
			flex-wrap: wrap;
			position: fixed;
			// top:100upx;
			width: 100%;
			z-index: 1000;
			.item {
				// border: 1px solid red;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				width: 33.333%;
				height: 85upx;
				color: #666666;
				view {
					font-size: 26upx;
					// padding-bottom: 10upx;
					font-weight: normal;
				}
			}
			.item:first-child,
			.item:nth-child(2),
			.item:nth-child(3) {
				padding-top: 30upx;
			}
			.item:last-child,
			.item:nth-child(4),
			.item:nth-child(5) {
				padding-top: 15upx;
			}
			.orange {
				color: #ff1268;
				border-bottom: 2upx solid #ff1268;
			}
		}
	}
	.main {
		// border: 1upx solid red;
		box-sizing: border-box;
		width: 100%;

		.dateTitle {
			font-size: 18upx;
			color: #ccc;
			text-align: left;
			margin-bottom: 25upx;
		}
		.nodata {
			width: 100%;
			font-size: 28upx;
			color: #cccccc;
			margin-top: 60%;
			justify-content: center;
			display: flex;
		}

		.list {
			background: #fff;
			/*border: 1upx solid red;*/
			width: 100%;
			padding: 80upx 30upx 25upx;
			flex-direction: column;
			.uni-loadmore {
				justify-content: center;
				align-items: center;
			}
			.item {
				width: 100%;
				display: flex;
				margin-bottom: 28upx;
				align-items: center;

				.colunm1 {
					width: 30%;
					text-align: right;
					margin-right: 20upx;
					flex-direction: column;
					align-items: center;

					.date {
						font-size: 22upx;
						color: #ccc;
					}
					.time {
						font-size: 18upx;
						color: #ccc;
						margin-top: 6upx;
					}
				}

				.colunm2 {
					width: 70%;
					/*border: 1upx solid red;*/
					display: flex;
					flex-direction: column;
					/*justify-content: space-between;*/
					text-align: left;
					width: 100%;
					.row1 {
						display: flex;
						justify-content: space-between;
						align-items: center;
						view:first-child {
							align-items: center;
						}
						.expenditure {
							color: #3e8fe3;
						}

						.money {
							font-size: 36upx;
							margin-right: 3upx;
							margin-left: 2upx;
						}

						.status {
							font-size: 26upx;
							color: #ff8200;
						}
						.red {
							color: #ff0000;
						}
						.gray {
							color: #999;
						}
					}
					.description {
						font-size: 26upx;
						color: #333333;
						margin-top: 8upx;
					}
				}
			}
			.marginBottom {
				margin-bottom: 0;
			}
		}
	}
}
</style>
